<template>
	<view class="body">
		<xk-header title="看房登记"></xk-header>

		<view class="list">
			<view class="list-item header" @click="formMore = !formMore">
				<view>
					<view class="header-icon"></view>登记信息
				</view>
				<image v-if="!formMore" src="/static/up.png"></image>
				<image v-else src="/static/down.png"></image>
			</view>
			<view v-if="formMore">
				<view class="list-item">
					<view>客户姓名<text class="com-req"></text>：</view>
					<input v-model="formData.apply_user" class="input-item" placeholder="请输入客户姓名"
						placeholder-class="placeholder" />
				</view>
				<view class="list-item">
					<view>客户单位<text class="com-req"></text>：</view>
					<input v-model="formData.company_name" class="input-item" placeholder="请输入客户单位"
						placeholder-class="placeholder" />
				</view>
				<view class="list-item">
					<view>联系电话<text class="com-req"></text>：</view>
					<input v-model="formData.contact_phone" class="input-item" placeholder="请输入联系电话"
						placeholder-class="placeholder" />
				</view>
				<view @click="editBuild" class="list-item">
					<view>物业信息<text class="com-req"></text>：</view>
					<view v-if="assetsPropertyIds.length > 0" class="right-title1" style="color: #2C72FF;">
						已参观{{ assetsPropertyIds.length }}处物业</view>
					<view v-else class="right-title1" style="color: #2C72FF;">添加参观物业</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
				</view>
				<!-- <biaofun-datetime-picker :defaultValue="defaultDate" start="2000-02-03 00:00" end="2200-10-28 23:59"
					fields="minute" @change="dateChange">
					<view class="list-item">
						<view>看房时间<text class="com-req"></text>：</view>
						<view :class="formData.check_businessdate ? 'right-title1' : 'right-title1 right-title1-empty'">
							{{ formData.check_businessdate ? formData.check_businessdate : "请选择" }}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
					</view>
				</biaofun-datetime-picker> -->

				<view class="list-item">
					<view>看房时间<text class="com-req"></text>：</view>
					<view :class="formData.check_businessdate != '' ? 'right-title1' : 'right-title1 right-title1-empty'"
						@click="showDate">
						{{ formData.check_businessdate ? formData.check_businessdate : "请选择" }}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
				</view>
				<u-datetime-picker :show="show" v-model="defaultDate" mode="datetime" :closeOnClickOverlay="true"
					@close="show = false" @confirm="confirmdate" @cancel='show = false'
					@change="dateChange"></u-datetime-picker>

				<picker :range="chanceArray" range-key="label" :value="formData.is_intention" @change="chanceChange">
					<view class="list-item">
						<view>是否有意向<text class="com-req"></text>：</view>
						<view class="right-title1">{{ chanceArray[formData.is_intention].label }}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
					</view>
				</picker>
				<picker v-if="formData.is_intention" :range="propertyDecArray" range-key="label" :value="propertyDecIndex"
					@change="propertyDecChange">
					<view class="list-item">
						<view>物业情况<text class="com-req"></text>：</view>
						<view v-if="propertyDecArray.length > 0" class="right-title1">
							{{ propertyDecArray[propertyDecIndex].label }}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png" />
					</view>
				</picker>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>需维修部位：</view>
					<textarea v-model="formData.need_repair" placeholder="请输入需维修部位" placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>租赁用途：</view>
					<input v-model="formData.purpose" class="input-item" placeholder="请输入租赁用途"
						placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>意向租赁面积(㎡)<text class="com-req"></text>：</view>
					<input v-model="formData.intent_area" type="digit" class="input-item" placeholder="请输入客户意向租赁面积"
						placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>意向价格(元/㎡)<text class="com-req"></text>：</view>
					<input v-model="formData.intent_price" type="digit" class="input-item" placeholder="请输入客户意向价格"
						placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>车位要求：</view>
					<input v-model="formData.intent_parking" class="input-item" placeholder="请输入客户车位要求"
						placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>环境要求：</view>
					<textarea v-model="formData.intent_environment" placeholder="在此输入客户环境要求"
						placeholder-class="placeholder" />
				</view>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>其它要求：</view>
					<textarea v-model="formData.company_claim" placeholder="在此输入其它要求" placeholder-class="placeholder" />
				</view>
				<view class="list-item textarea">
					<view>客户反馈<text v-if="!formData.is_intention" class="com-req"></text>：</view>
					<textarea v-model="formData.register_remark" placeholder="在此输入客户反馈" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">立即登记</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
import moment from 'moment'
export default {
	data() {
		return {
			lookRoomData: {
				pi_looking_property_dets: []
			},
			more: true,
			show: false,
			formMore: true,
			chanceArray: [{ value: 0, label: '否' }, { value: 1, label: '是' }],
			propertyDecArray: [],
			propertyDecIndex: 0,
			assetsPropertyIds: [],
			defaultDate: moment().format('YYYY-MM-DD HH:mm'),
			timer: '',
			formData: {
				company_name: '',
				apply_user: '',
				contact_phone: '',
				lease_purpose: '',
				assetsPropertyIds: [],
				check_businessdate: '',
				is_intention: 1,
				property_dec: '',
				need_repair: '',
				purpose: '',
				company_claim: '',
				intent_area: '',
				intent_price: '',
				intent_parking: '',
				intent_environment: '',
				register_remark: '',
				isSubmit: true
			}
		};
	},
	onLoad(options) {
		// this.formData.look_id = options.lookId;
		// this.formData.check_businessdate = this.defaultDate
		this.getLookRoomData()
	},
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer)
		}
	},
	methods: {
		showDate() {
			this.show = true
		},
		confirmdate(e) {
			console.log('confirmdate', moment(e.value).format('YYYY-MM-DD HH:mm'))
			let date = moment(e.value).format('YYYY-MM-DD HH:mm')
			console.log(date)
			this.formData.check_businessdate = date
			console.log('this.formData.check_businessdate', this.formData.check_businessdate)
			this.show = false
		},
		getLastData() {
			let data = this.$util.getStorage('NOBOOKINGCREATE') || ''
			if (data && (data.formData.company_name || data.formData.apply_user || data.formData.contact_phone)) {
				this.$util.confirm({
					content: '存在未提交记录，是否继续编辑'
				}).then((flag) => {
					if (flag) {
						this.formData = Object.assign(this.formData, data.formData)
						this.propertyDecIndex = data.propertyDecIndex
						this.assetsPropertyIds = data.assetsPropertyIds
					}
					this.saveLastData();
				})
			} else {
				this.saveLastData();
			}
		},
		saveLastData() {
			console.log('=======saveLastData=')
			let data = {
				formData: this.formData,
				propertyDecIndex: this.propertyDecIndex,
				assetsPropertyIds: this.assetsPropertyIds
			}
			this.$util.setStorage('NOBOOKINGCREATE', data)
			this.timer = setTimeout(() => {
				this.saveLastData()
			}, 100000)
		},
		editBuild() {
			uni.$off('getBuildInfo')
			uni.$on('getBuildInfo', (res) => {
				this.assetsPropertyIds = res

			});
			uni.navigateTo({
				url: '/pagesA/check-house/common-building-list?ids=' + JSON.stringify(this.assetsPropertyIds)
			})
		},
		getLookRoomData() {
			this.$api.baseData_getToolDataList({ code: 'PI_LOOKING_ROOM_PROPERTYDEC' + "_nostr" }).then((res) => {
				for (let item of res) {
					this.propertyDecArray.push({
						value: item.data_value,
						label: item.data_text
					})
				}
				this.formData.property_dec = 0
				this.getLastData();
			})
			// this.$api.baseData_getPiLookingRoom(this.formData.look_id).then((res)=>{
			// 	this.lookRoomData = res.piLookingRoom
			// })
		},
		chanceChange(e) {
			this.formData.is_intention = e.detail.value
		},
		propertyDecChange(e) {
			this.propertyDecIndex = e.detail.value
		},
		dateChange(e) {
			console.log('dateChange', moment(e.value).format('YYYY-MM-DD HH:mm'))
			this.formData.check_businessdate = moment(e.value).format('YYYY-MM-DD HH:mm')

		},
		doneSubmit() {
			if (!this.formData.company_name) {
				this.$util.toast('请输入客户单位')
				return
			}
			if (!this.formData.apply_user) {
				this.$util.toast('请输入客户姓名')
				return
			}
			if (!this.formData.contact_phone) {
				this.$util.toast('请输入客户联系方式')
				return
			}
			this.formData.property_dec = this.propertyDecArray[this.propertyDecIndex].value
			for (let item of this.assetsPropertyIds) {
				this.formData.assetsPropertyIds.push(item.property_id)
			}
			if (this.formData.assetsPropertyIds.length == 0) {
				this.$util.toast('请选择用户查看的物业')
				return
			}
			if(this.propertyDecIndex === '1'){
				if (!this.formData.need_repair) {
					this.$util.toast('请提交需要维修的部分')
					return
				}
			}
			if (this.formData.is_intention == 1) {
				if (!this.formData.purpose) {
					this.$util.toast('请输入客户租赁用途')
					return
				}
				this.formData.lease_purpose = this.formData.purpose
				if (!this.formData.intent_area) {
					this.$util.toast('请输入客户意向租赁面积')
					return
				}
				if (!this.formData.intent_price) {
					this.$util.toast('请输入客户意向价格')
					return
				}
			}
			if (this.formData.is_intention == '0' && !this.formData.register_remark) {
				this.$util.toast('请输入客户反馈')
				return
			}
			if (this.formData.is_intention == '0') {
				this.formData.intent_area = '0'
				this.formData.intent_price = '0'
			}
			this.formData.check_businessdate += ':00'
			this.$util.confirm({
				content: "确认要提交登记信息？",
				confirmText: "提交"
			}).then(isConfirm => {
				if (isConfirm) {

					this.$util.post({
						url: "app/piLookingRoom/proxyCreate",
						data: this.formData
					}).then((res) => {
						if (this.timer) {
							clearTimeout(this.timer)
							this.$util.removeStorage('NOBOOKINGCREATE')
						}
						if (res.code == 'UNAUTHORIZED_ACCESS') {
							this.$util.toast(res.message)
						} else {
							uni.redirectTo({
								url: '/pagesA/check-house/check-house-finish?type=done'
							})
						}
					});
				}
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.scroll {
	.scroll-x {
		display: inline-flex;
		padding-right: 30rpx;
	}

	.scroll-one {
		.data-item {
			width: 650rpx !important;
		}
	}
}

.data-item {
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 0rpx 0rpx 30rpx;
	padding: 20rpx;
	color: #333;
	font-size: 28rpx;
	white-space: normal;
	width: 550rpx;

	.item-top {
		display: flex;

		:first-child {
			flex: 1;
		}

		.del-img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item-middel {
		display: flex;
		margin-top: 10rpx;

		.img {
			width: 200rpx;
			height: 150rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				.name {
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333;
				}

				.desc {
					font-size: 28rpx;
					color: #999999;
				}

				.amount {
					font-size: 36rpx;
					font-weight: bolder;
					color: #FF3737;
				}
			}
		}
	}

	.location-view {
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
		border-top: 1px solid #EEEEEE;
		padding-top: 10rpx;

		.dingwei {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
		}

		.address {
			font-size: 24rpx;
			color: #333;
			margin-left: 10rpx;
		}
	}
}

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;

		>view:first-child {
			color: #333333;
		}

		.input-item {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}

		.right-title1 {
			flex: 1;
			text-align: right;
			color: #333;
		}

		.right-title1-empty {
			color: #ccc;
		}

		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.textarea {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		textarea {
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.list-item2 {
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;

		:first-child {
			width: 150rpx;
		}
	}

	.header {
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		padding: 30rpx 20rpx 30rpx 0;

		>view:first-child {
			flex: 1;
			display: flex;
			align-items: center;
			color: #333333;

			.header-icon {
				height: 40rpx;
				width: 12rpx;
				border-top-right-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
				background-color: #2C72FF;
				margin-right: 10rpx;
			}
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}

.btn-view {
	display: flex;
	justify-content: space-around;

	.btn {
		width: 290rpx;
		height: 88rpx;
	}
}
</style>
